<template>
  <!-- 账号密码登录 -->
  <view class="login">
    <!-- <view class="wrapper">
      <img class="login-img" src="../../static/img/login.jpg" alt="">
    </view> -->
    <text class="main-title">账号密码登录</text>
    <view class="input-group">
      <view class="input-row border">
        <text class="title">登录账号：</text>
        <m-input class="m-input" type="text" clearable focus v-model="username" placeholder="请输入登录账号"></m-input>
      </view>
      <view class="input-row border">
        <text class="title">密码：</text>
        <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
      </view>
      <view class="input-row border">
        <text class="title">手机：</text>
        <m-input class="m-input" type="text" clearable focus v-model="mobile" placeholder="请输入手机号码"></m-input>
      </view>
      <view class="input-row">
        <text class="title">验证码：</text>
        <m-input type="text" v-model="code" placeholder="请输入验证码"></m-input>
        <button class="send-code-btn" :loading="sendBtnLoading" @click="sendSmsCode">{{ codeDuration ? codeDuration + 's' : '发送验证码' }}</button>
      </view>
    </view>
    <view class="btn-row login-btn">
      <button type="primary" class="primary" :loading="loginBtnLoading" @tap="loginByPwd">登录</button>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';
  import mInput from '../../components/m-input.vue';
  import { getDeviceUUID } from '@/common/utils.js';
  import LoginApi from '@/api/login';

  let weixinAuthService;
  const captchaOptions = {
    deviceId: getDeviceUUID(),
    scene: 'login'
  };

  export default {
    components: {
      mInput
    },
    data() {
      return {
        platform: uni.getSystemInfoSync().platform,
        username: '',
        mobile: '',
        code: '',
        password: '',
        codeDuration: 0,
        loginBtnLoading: false,
        sendBtnLoading: false
      };
    },
    computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
    methods: {
      ...mapMutations(['login']),
      goto(url) {
        uni.redirectTo({
          url
        });
      },
      // 发送验证码
      async sendSmsCode() {
        if (this.sendBtnLoading) {
          return;
        }
        if (this.codeDuration) {
          uni.showToast({
            title: `请在${this.codeDuration}秒后重试`,
            icon: 'none'
          });
          return;
        }
        if (!this.mobile) {
          this.$toast('请输入手机号');
          return;
        }

        // if (!/^1\d{10}$/.test(this.mobile)) {
        //   uni.showToast({
        //     title: '手机号码填写错误',
        //     icon: 'none'
        //   })
        //   return
        // }
        this.sendBtnLoading = true;
        const res = await this.$http.post(LoginApi.sendCode, {
          phone: this.mobile
        });
        this.sendBtnLoading = false;

        console.log('res', res);

        if (res) {
          this.$toast('验证码发送成功，请注意查收');
          this.codeDuration = 60;
          this.codeInterVal = setInterval(() => {
            this.codeDuration--;
            if (this.codeDuration === 0) {
              if (this.codeInterVal) {
                clearInterval(this.codeInterVal);
                this.codeInterVal = null;
              }
            }
          }, 1000);
        }
      },
      // 登录
      async loginByPwd() {
        if (this.loginBtnLoading) {
          return;
        }
        if (!this.username) {
          this.$toast('请输入用户名');
          return;
        }
        if (!this.password) {
          this.$toast('请输入密码');
          return;
        }
        if (!this.mobile) {
          this.$toast('请输入手机号')
          return;
        }
        if (!this.code) {
          this.$toast('请输入验证码')
          return;
        }

        this.loginBtnLoading = true;
        const res = await this.$http.post(LoginApi.login, {
          usernamme: this.username,
          phone: this.mobile,
          code: this.code,
          password: this.password
        });
        this.loginBtnLoading = false;

        console.log('login-res', res);

        if (res) {
          this.$toast('登陆成功');
          this.login(res);
          setTimeout(() => {
            /**
             * 强制登录时使用reLaunch方式跳转过来
             * 返回首页也使用reLaunch方式
             */
            uni.reLaunch({
              url: '../main/index'
            });
          }, 0);
          // setTimeout(() => {
          //   this.toMain(res);
          // }, 0)
        }
      }
    }
  };
</script>

<style lang="scss">
  .login {
    margin-top: 40rpx;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px;

    &-img {
      width: 200rpx;
      height: 200rpx;
    }

    .wrapper {
      text-align: center;
    }

    .main-title {
      padding-left: 15px;
      font-size: 48rpx;
    }

    &-btn {
      margin-top: 64rpx;
    }
  }

  .login-type {
    display: flex;
    justify-content: center;
  }

  .login-type-btn {
    line-height: 30px;
    margin: 0px 15px;
  }

  .send-code-btn {
    width: 200rpx;
    text-align: center;
    background-color: $uni-color-primary;
    color: #ffffff;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .action-row navigator {
    color: #007aff;
    padding: 0 10px;
  }

  .login-btn {
    text-align: center;
  }

  .primary-text {
    display: inline-block;
    margin-top: 30rpx;
    color: $uni-color-primary;
  }
</style>